<template>
  <div id="check" class="check-container">
    <div class="check-box">
      <div class="check-head">
        <div class="text-center company-name"><span>成都倍特药业有限公司</span></div>
        <div class="text-center check-name"><span>请 验 单</span></div>
        <div class="check-num"><span>记录编号：ZL·T / SOP·031-R02-00</span></div>
      </div>
      <div class="check-body">
        <table border="1">
          <tr>
          	<td class="h-40 text-center">生产车间</td>
            <td colspan="2"><div class="m-l-5">{{ wk ? wkList.workshopName : zcList.workshopName }}</div></td>
            <td class="h-40 text-center">生产工序</td>
            <td colspan="2"><div class="m-l-5">{{ wk ? '-' : zcList.procedureName }}</div></td>
            <td rowspan="7" class="t-r">
              <div>
                第一联<br><br>请验部门留存
              </div>
            </td>
          </tr>
          <tr>
          	<td class="h-40 text-center">品&nbsp;&nbsp;名</td>
            <td colspan="2"><div class="m-l-5">{{ checkList.productName }}</div></td>
            <td class="h-40 text-center">规&nbsp;&nbsp;格</td>
            <td colspan="2">
              <div class="m-l-5">
                <span v-html="checkList.productSpec"></span>
                <span v-if="checkList.productPackSpec != null">{{ ' × ' + checkList.productPackSpec }}</span>
              </div>
            </td>
          </tr>
          <tr>
          	<td class="h-40 text-center">产品编码</td>
            <td colspan="2"><div class="m-l-5">{{ checkList.productGmp }}</div></td>
            <td class="h-40 text-center">批&nbsp;&nbsp;号</td>
            <td colspan="2"><div class="m-l-5">{{ checkList.batchNum }}</div></td>
          </tr>
          <tr>
          	<td class="h-40 text-center">生产日期</td>
            <td colspan="2">
              <div v-if="zc" class="m-l-5">{{ zcList.productionDate | changeTime }}</div>
              <div v-if="wk && wkList.productionDate != null" class="m-l-5">{{ wkList.productionDate | changeTime }}</div>
            </td>
            <td class="h-40 text-center">批&nbsp;&nbsp;量</td>
            <td colspan="2"><div class="m-l-5">{{ wk ? '-' : (zcList.batchQuantity + ' ' + zcList.batchUnitName) }}</div></td>
          </tr>
          <tr>
          	<td class="t-1 text-center h-40">取 样 量</td>
            <td class="t-1 h-40"><div class="m-l-5">{{ checkList.getQuantity + ' ' + checkList.getUnitName }}</div></td>
            <td class="t-1 text-center h-40">请验日期</td>
            <td class="t-1 h-40"><div class="m-l-5">{{ checkList.registCheckDate | changeTime }}</div></td>
            <td class="t-1 text-center h-40">请 验 人</td>
            <td class="t-1 h-40"><div class="m-l-5"></div></td>
          </tr>
          <tr>
          	<td class="h-40 text-center">请验项目</td>
            <td colspan="5"><div class="m-l-5">{{ checkList.isTest == 1 ? '只用于留样' : checkList.isTest == 2 ? '只用于稳考' : checkList.isAllTest == 0 ? '全检' : itemNames }}</div></td>
          </tr>
          <tr>
          	<td class="h-40 text-center">备&nbsp;&nbsp;注</td>
            <td colspan="5">
              <div @click="showEnvT = !showEnvT" class="m-l-5 point">
                {{ wk ? (wkList.stabilityModeName + wkList.timeValue + wkList.timeName) : checkList.remark }}
                <span v-if="wk && showEnvT">{{ '(' + checkList.remark + ')' }}</span>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="check-box" :style="{'margin-top': blankHeight, 'margin-bottom': '20px'}">
      <div class="check-head">
        <div class="text-center company-name"><span>成都倍特药业有限公司</span></div>
        <div class="text-center check-name"><span>请 验 单</span></div>
        <div class="check-num"><span>记录编号：ZL·T / SOP·031-R02-00</span></div>
      </div>
      <div class="check-body">
        <table border="1">
          <tr>
          	<td class="h-40 text-center">生产车间</td>
            <td colspan="2"><div class="m-l-5">{{ wk ? wkList.workshopName : zcList.workshopName }}</div></td>
            <td class="h-40 text-center">生产工序</td>
            <td colspan="2"><div class="m-l-5">{{ wk ? '-' : zcList.procedureName }}</div></td>
            <td rowspan="7" class="t-r">
              <div>
                第二联<br><br>质量控制部留存
              </div>
            </td>
          </tr>
          <tr>
          	<td class="h-40 text-center">品&nbsp;&nbsp;名</td>
            <td colspan="2"><div class="m-l-5">{{ checkList.productName }}</div></td>
            <td class="h-40 text-center">规&nbsp;&nbsp;格</td>
            <td colspan="2">
              <div class="m-l-5">
                <span v-html="checkList.productSpec"></span>
                <span v-if="checkList.productPackSpec != null">{{ ' × ' + checkList.productPackSpec }}</span>
              </div>
            </td>
          </tr>
          <tr>
          	<td class="h-40 text-center">产品编码</td>
            <td colspan="2"><div class="m-l-5">{{ checkList.productGmp }}</div></td>
            <td class="h-40 text-center">批&nbsp;&nbsp;号</td>
            <td colspan="2"><div class="m-l-5">{{ checkList.batchNum }}</div></td>
          </tr>
          <tr>
          	<td class="h-40 text-center">生产日期</td>
            <td colspan="2">
              <div v-if="zc" class="m-l-5">{{ zcList.productionDate | changeTime }}</div>
              <div v-if="wk && wkList.productionDate != null" class="m-l-5">{{ wkList.productionDate | changeTime }}</div>
            </td>
            <td class="h-40 text-center">批&nbsp;&nbsp;量</td>
            <td colspan="2"><div class="m-l-5">{{ wk ? '-' : (zcList.batchQuantity + ' ' + zcList.batchUnitName) }}</div></td>
          </tr>
          <tr>
          	<td class="t-1 text-center h-40">取 样 量</td>
            <td class="t-1 h-40"><div class="m-l-5">{{ checkList.getQuantity + ' ' + checkList.getUnitName }}</div></td>
            <td class="t-1 text-center h-40">请验日期</td>
            <td class="t-1 h-40"><div class="m-l-5">{{ checkList.registCheckDate | changeTime }}</div></td>
            <td class="t-1 text-center h-40">请 验 人</td>
            <td class="t-1 h-40"><div class="m-l-5"></div></td>
          </tr>
          <tr>
          	<td class="h-40 text-center">请验项目</td>
            <td colspan="5"><div class="m-l-5">{{ checkList.isTest == 1 ? '只用于留样' : checkList.isTest == 2 ? '只用于稳考' : checkList.isAllTest == 0 ? '全检' : itemNames }}</div></td>
          </tr>
          <tr>
          	<td class="h-40 text-center">备&nbsp;&nbsp;注</td>
            <td colspan="5">
              <div @click="showEnvT = !showEnvT" class="m-l-5 point">
                {{ wk ? (wkList.stabilityModeName + wkList.timeValue + wkList.timeName) : checkList.remark }}
                <span v-if="wk && showEnvT">{{ '(' + checkList.remark + ')' }}</span>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getCheckInfo } from '@/api/check'
  import { CODE_OK } from '@/common/js/config'
  import { isBlank,parseTime } from '@/common/js/utils'
	export default {
    data() {
      return {
        maxHeight: 1480,
        visible: false,
        checkList: {},
        zcList: {},
        wkList: {},
        itemNames: [],
        blankHeight: '0px',
        content: '',
        showEnvT: false
      }
    },
    props: ["childDataForm"],
    created() {
      if (!isBlank(this.childDataForm)) {
        this.checkList = this.childDataForm
        this.content = this.checkList.checkTypeId == 6 ? 'wk' : 'zc'
        this.visible = true
        this.getData()
      }
    },
    computed: {
      zc() {
        return this.checkList.checkTypeId == 4 || this.checkList.checkTypeId == 5
      },
      wk() {
        return this.checkList.checkTypeId == 6
      }
    },
    methods: {
      getData() {
        const params = {
          content: this.content,
          checkId: this.checkList.checkId
        }
        getCheckInfo(params).then(res => {
          if (res.code === CODE_OK) {
          	this.zcList = res.info.zcList
            this.wkList = res.info.wkList
            if (this.checkList.isAllTest == 1 && this.checkList.isTest == 0) {
              this.itemNames = res.info.items.map(item => {
                return item.inspectionItemName
              })
              this.itemNames = this.itemNames.join('、')
            }
            this.$nextTick(() => {
              this.fallToMaxHeight()
            })
          }else{
          	this.$message.error(res.msg)
          }
        })
      },
      fallToMaxHeight() {
        let currentHeight  = parseInt(window.getComputedStyle(document.getElementById('check')).getPropertyValue('height'))
        if (currentHeight < this.maxHeight) {
          this.blankHeight = this.maxHeight - currentHeight
          this.blankHeight = this.blankHeight + 'px'
        }
      },
      close() {
        this.visible = false
        this.$emit('close')
      }
    }
	}
</script>

<style type="text/scss" lang="scss" scoped>
  .check-container{
    color: black;
    background-color: #fff;
    font-family: SimSun;
    font-size: 23px;
    width: 960px;
    // height: 1480px;
    padding: 15px;
    .check-box{
      padding: 0 50px;
    }
    .check-head{
      height: 120px;
      .company-name{
        margin-top: 20px;
      }
      .check-name{
        font-size: 30px;
        margin-top: 15px;
      }
      .check-num{
        font-size: 20px;
        text-align: right;
        margin-top: 5px;
      }
    }
    .check-body{
      .h-40{
        height: 45px;
      }
      .m-l-5{
        margin-left: 5px;
      }
      .t-1{
        width: 130px;
      }
      .t-r{
        width: 50px;
        font-size: 14px;
        padding: 0 17px;
      }
    }
  }
</style>
